@import "../param";

$header-height: 60px;
$font-size: 14px;
$font-color: #333;
$switch-model-background: #f5f5f5;
$switch-icon-color: #646F83;
$switch-active-icon-color: #007FCD;

.customer-profile-header {
	height: $header-height;
	margin: 0;
	padding: 15px 20px;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07);
	background-color: $white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: $font-size;
	color: $font-color;

	.user-info {
		.wangwang-icon {
			vertical-align: text-top;
			margin-left: 6px;
		}
	}

	.user-marketing-responsivities {
		.marketing-responsivities-progress {
			width: 60px;
			height: 8px;
			border-radius: 4px;
			background-color: #e6e6e6;
			margin-right: 6px;

			&::-webkit-progress-bar {
				background: transparent;
			}

			&::-webkit-progress-value {
				background: #6faa4f;
				border-radius: 4px;
			}

			&::-moz-progress-bar {
				background: #6faa4f;
				border-radius: 4px;
			}
		}
	}

	.switch-view {
		background-color: $switch-model-background;
	}

	.switch-view-icon {
		cursor: pointer;
		float: left;
		width: 36px;
		height: 30px;
		color: $switch-icon-color;
		display: flex;
		justify-content: center;
		align-items: center;

		&.switch-view-icon--active {
			color: $switch-active-icon-color;
		}
	}
}
